<template>
  <div class="form-container">
    <ul class="form-container-left">
      <li
        v-for="(menu, index) in menus"
        :key="index"
        :class="{ active: active == menu.component }"
        @click="handleTableClick(menu)"
      >
        <span>{{ menu.name }}</span>
      </li>
    </ul>
    <div class="form-container-right">
      <component
        ref="component"
        :is="active"
        :template-id="templateId"
      />
    </div>
  </div>
</template>
<script>
import ProjectStatus from '@src/modules/setting/projectManage/components/ProjectStatus';
import TaskSettings from '@src/modules/setting/projectManage/components/TaskSettings';
import WorkflowSettings from '@src/modules/setting/projectManage/components/WorkflowSettings';

export default {
  name: 'project-process-design',
  components: {
    [ProjectStatus.name]: ProjectStatus,
    [TaskSettings.name]: TaskSettings,
    [WorkflowSettings.name]: WorkflowSettings,
  },
  props: {
    templateId: {
      type: String | Number,
      default: '',
    },
  },
  data() {
    return {
      active: 'project-status',
    }
  },
  computed: {
    menus() {
      return [
        {
          name: this.$t('projectManage.setting.projectStatus.title'),
          component: ProjectStatus.name,
        },
        {
          name: this.$t('projectManage.setting.taskSetting.title'),
          component: TaskSettings.name,
        },
        {
          name: this.$t('projectManage.setting.flowSetting.title'),
          component: WorkflowSettings.name,
        },
      ];
    }
  },
  methods: {
    handleTableClick(menu) {
      this.active = menu.component;
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@src/modules/setting/projectManage/common/stepCommon.scss';
</style>